<template>
  <div>
    <!-- 右边第一个卡片 -->
    <el-card align="middle">
      <el-avatar :size="80" :src="user.avatar"></el-avatar>
      <h1>{{user.username}}</h1>
      <p>人是一根能思想的苇草！</p>
      <div class="maction">
        <i class="iconfont icon-github"></i>
        <i class="iconfont icon-weixin1"></i>
        <i class="iconfont icon-weibo"></i>
        <i class="iconfont icon-qq"></i>
      </div>
    </el-card>
    <!-- 右边第二个卡片 -->
    <el-card class="card-p">
      <h2>
        <i class="iconfont icon-laba1"></i>公告
      </h2>
      <p>欢迎关顾小站，进来看看吧！有任何问题欢迎在留言板留言哦！我会及时回复的！</p>
    </el-card>
    <!-- 右边第三个卡片 -->
    <el-card class="card-p">
      <h2>
        <i class="iconfont icon-wendang"></i>&nbsp;最新文章
      </h2>
      <p>欢迎关顾小站，进来看看吧！有任何问题欢迎在留言板留言哦！我会及时回复的！</p>
    </el-card>
    <el-card class="card-p">
      <h2>
        <i class="iconfont icon-tubiao-4"></i>&nbsp;分类
      </h2>
      <p>欢迎关顾小站，进来看看吧！有任何问题欢迎在留言板留言哦！我会及时回复的！</p>
    </el-card>
    <el-card class="card-p">
      <h2>
        <i class="iconfont icon-biaoqian1"></i>&nbsp;标签
      </h2>
      <p>欢迎关顾小站，进来看看吧！有任何问题欢迎在留言板留言哦！我会及时回复的！</p>
    </el-card>
    <el-card class="card-p">
      <h2>
        <i class="iconfont icon-guidang1"></i>&nbsp;归档
      </h2>
      <p>欢迎关顾小站，进来看看吧！有任何问题欢迎在留言板留言哦！我会及时回复的！</p>
    </el-card>
    <el-card class="site-consulting">
      <h2>
        <i class="iconfont icon-wangzhanzixun"></i>&nbsp;网站咨询
      </h2>
      <div>文章数目：&nbsp;&nbsp;&nbsp;&nbsp;2</div>
      <div>已运行时间 :&nbsp;&nbsp;&nbsp;&nbsp;2天</div>
      <div>本站总字数 :</div>
      <div>本站访客数 :</div>
      <div>本站总访问量 :</div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        username: 'Zhang Huan',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      }
    }
  },
  methods: {
    logout() { }
  }
}
</script>
<style lang="less" scoped>
.maction {
  margin: 10px 0;
  i {
    font-size: 24px;
    letter-spacing: 5px;
  }
}
.card-p p {
  text-indent: 2em;
  line-height: 20px;
}
.site-consulting div {
  margin: 10px;
}
.icon-laba1 {
  font-size: 25px;
  color: red;
  margin-right: 10px;
}
</style>
